<template>
	<div>
	  <el-row :gutter="10">
	   <el-col :span="12" style="margin-bottom: 10px">
		 <div class="card" style="padding: 20px; height: 400px" id="bar"></div>
	   </el-col>
		<el-col :span="12" style="margin-bottom: 10px">
		  <div class="card" style="padding: 20px; height: 400px" id="line"></div>
		</el-col>
		<el-col :span="12" style="margin-bottom: 10px">
		  <div class="card" style="padding: 20px; height: 400px" id="pie"></div>
		</el-col>
	  </el-row>
	</div>
  </template>
<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import { barDataApi, lineDataApi, pieDataApi } from '@/api/data';
const barOption = {
  title: {
    text: '各部门员工数量'
  },
  tooltip: {},
  legend: {
    trigger: 'item'
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '人数',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20],
	  itemStyle: {
			normal: {
				color: function () {
					return "#" + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);
				}
			},
		},
    }
  ]
};
const lineOption = {
  title: {
    text: '进七天发布文章的数量'
  },
  tooltip: {},
  legend: {
    trigger: 'item'
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '发布数量',
      type: 'line',
	  smooth: true,
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};
const pieOption = {
  title: {
    text: '各部门员工数量比例图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '员工数量',
      type: 'pie',
      radius: '50%',
      data: [],
      center: ['50%', '50%'],
      label: {
        formatter: '{b}: {@2012} ({d}%)'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

// onMounted 表示页面的所有dom元素都初始化完成了
onMounted(async() => {
  // 基于准备好的dom，初始化echarts实例
  const barChart = echarts.init(document.getElementById('bar'))
  const res = await barDataApi()
	// console.log(res);
	barOption.xAxis.data = res.data.departments
	// console.log(barOption);
	barOption.series[0].data = res.data.employeeCounts
  // 使用刚指定的配置项和数据显示图表。
  barChart.setOption(barOption);

  const lineChart = echarts.init(document.getElementById('line'))
  const res1 = await lineDataApi()
	lineOption.xAxis.data = res1.data.date
	lineOption.series[0].data = res1.data.count
  // 使用刚指定的配置项和数据显示图表。
  	lineChart.setOption(lineOption);

	const pieChart = echarts.init(document.getElementById('pie'))
	const res2 = await pieDataApi()
	pieOption.series[0].data = res2.data
  // 使用刚指定的配置项和数据显示图表。
  	pieChart.setOption(pieOption);

//   echarts.init(document.getElementById('line')).setOption(option1)
})
</script>
<style>

</style>